<template>
    <div class="test-paper-increase">
        <!-- 新增弹窗 -->
        <a-modal
         class="test-paper-modal"
         :visible="visibleShow" 
         :title="formState.id?'编辑问卷':'新增问卷'" 
         @ok="visibleShow = false" 
         @cancel="visibleShow = false"
         :maskClosable="false"
         cancelText=""
         :centered="true"
         width="100%"
         wrapClassName="test-paper-full-modal"
         >
            <a-spin size="large" :spinning="spinning" :key="spinningKey">
                <div style="margin-bottom: 20px;">
                    <a-button class="blue-btn" type="primary" @click="returnClick()">返回</a-button>
                    <a-button style="margin-left: 10px;" class="blue-btn" type="primary" @click="refreshClick()">刷新</a-button>
                    <a-button style="margin-left: 15px;" :loading="!visibleShow || confirmLoading" class="blue-btn" type="primary" @click="saveMainTable">保存</a-button>
                </div>
                <div v-if="visibleShow">
                    <a-form :form="form" layout="inline">
                        <a-form-item label="问卷标题">
                            <a-input
                            placeholder="请输入问卷标题"
                            v-decorator="['fwjbt', { initialValue:formState.fwjbt, rules: rules.fwjbt}]"/>
                        </a-form-item>
                        <a-form-item label="问卷类型">
                            <a-input
                            placeholder="请输入问卷类型"
                            v-decorator="['fwjlx', { initialValue:formState.fwjlx, rules: rules.fwjlx}]" />
                        </a-form-item>
                    </a-form>
                    <div style="border-top: 1px solid rgb(92, 163, 229); margin: 15px 0;"/>
                    <!-- 大标题 -->
                    <!-- 题目 -->
                    <commpVxeTable
                        :key="questionnaireTitleKey"
                        :config="{...questionnaireTitleConfig,paramet:{fwjjbxxid:formState.id},expandRowKeys:expandRowKeys}" 
                        :columns="questionnaireTitleColumnsVxe" 
                        :formItem="questionnaireTitleFormItem"
                        @checkboxChange="checkboxChange"
                        :occupancyHeight="120"
                        ref="questionnaireManagementRef"
                        @toggleExpandChangeEvent="toggleExpandChangeEvent"
                    >
                        <template v-slot:externalOperations="{data}" v-if="formState.id">
                            <vxe-form-item>
                                <template>
                                    <a-button class="blue-btn" type="primary" @click="AddQuestion()">新增大标题</a-button>
                                </template>
                            </vxe-form-item>
                        </template>
                        <template v-slot:fwjtmdbt_btn="{row}">
                            <span v-if="!row.parentid"> {{ row.fwjtmdbt }} </span>
                        </template>
                        <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                            <a-form layout="inline" class="search-form" >
                                <a-form-item v-if="!row.parentid">
                                    <a-button class="red-btn" type="primary" @click="deleteQuestion(row)">删除</a-button>
                                </a-form-item>
                                <a-form-item v-else>
                                    <a-button class="red-btn" type="primary" @click="deleteTitle(row)">删除</a-button>
                                </a-form-item>
                                <a-form-item v-if="!row.parentid">
                                    <a-button class="blue-btn" type="primary" @click="editQuestion(row)">编辑大标题</a-button>
                                </a-form-item>
                                <a-form-item v-if="!row.parentid">
                                    <a-button class="blue-btn" type="primary" @click="increaseTitle(row)">新增题目</a-button>
                                </a-form-item>
                                <a-form-item v-else>
                                    <a-button class="blue-btn" type="primary" @click="editTitle(row)">编辑题目</a-button>
                                </a-form-item>
                                <a-form-item v-if="row.parentid">
                                    <a-button class="blue-btn" type="primary" @click="editAnswer(row)">编辑答案</a-button>
                                </a-form-item>
                                
                            </a-form>
                        </template>
                    </commpVxeTable>
                </div>
            </a-spin>
            <a-modal v-model:visible="fdbtVisible" :title="fdbtObj.id?'编辑大标题':'新增大标题'" @ok="fdbtHandleOk" @cancel="fdbtVisible = false">
                <a-form :key="fdbtKey" v-if="fdbtVisible" :form="form" layout="inline">
                    <a-form-item label="大标题">
                        <a-input
                        placeholder="请输入标题"
                        v-decorator="['fdbt', { initialValue:fdbtObj.fdbt, rules: rules.fdbt}]"/>
                    </a-form-item>
                </a-form>
            </a-modal>
            <increaseTitle ref="increaseTitleRef" @refreshClick="refreshClick"/>
            <answerIncrease ref="refAnswerModel" @refreshClick="refreshClick"/>
        </a-modal>
    </div>
</template>
<script>
import {typeInput, typeNumber, typeSelect, typeCheckbox, typeRadio} from '@/components/compSearchCriteria/ContractType'
import compSelector from '@/components/compSelector/compSelector'
import validator from '@/common/validator'
import increaseTitle from './increaseTitle.vue'
import answerIncrease from './answerIncrease.vue'
import {
    addServe, 
    editServe, 
    spcyWjWjjbxxAddWjjbxx, 
    spcyWjWjjbxxEditWjDbt,
    spcyWjWjjbxxAddWjDbt,
    spcyWjWjjbxxDeleteWjDbt,
    spcyWjWjjbxxDeleteBatchWjtm,
    editWjjbxx,
    
} from './service/index'
import assessCheckApi from './service/api'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
export default {
    components:{
        compSelector,
        commpVxeTable,
        increaseTitle,
        answerIncrease,
    },
    data(){
        return{
            fdbtKey:null,
            fdbtObj:{},
            fdbtVisible:false,
            selectedRowKeysArr:[],
            spinningKey:null,
            spinning:true,
            form: this.$form.createForm(this, { name: 'coordinated' }),
            visibleShow:false,
            confirmLoading:false,
            typeSelect:typeSelect,
            formState:{},
            rules:{
                fwjbt: [{
                    required: true,
                    message: '请输入问卷标题',
                    trigger: 'blur',
                }],
                fwjlx: [{
                    required: true,
                    message: '请输入问题类型',
                    trigger: 'blur',
                }],
                fdbt: [{
                    required: true,
                    message: '请输入大标题',
                    trigger: 'blur',
                }]
            },
            formRequer:'',
            optionsArr:[],
            submittedSuccessfully:false,
            isAddATopic:false,//是否可以添加题目
            cuerrfsjid:'',
            questionnaireTitleFormItem:[{
                label: '问卷大标题',
                model: 'fwjtmdbt'
            }],
            questionnaireTitleConfig:{
                api: assessCheckApi.spcyWjWjjbxxWjtmPageList,
                rowId: 'id',
                autoHidden:true,
                pageSize:100000,
                treeConfig:{
                    transform:true,
                    rowField:'id',
                    parentField:'parentid',
                },
                paramet:{
                    fwjjbxxid:''
                }
            },
            questionnaireTitleColumnsVxe:[{
                title: '问卷大标题', //列头显示文字
                field: 'fwjtmdbt',
                width: 180,
                treeNode: true,
                slots: {
                    // 使用插槽模板渲染
                    default: 'fwjtmdbt_btn',
                },
            },{
                title: '问卷题目', //列头显示文字
                field: 'fwjtm',
            },{
                title: '题目类型', //列头显示文字
                field: 'fwjtmlx',
            },{
                title: '操作',
                field: 'id',
                slots: {
                    // 使用插槽模板渲染
                    default: 'operation_btn',
                },
                fixed: 'right',
                width:490,
            }],
            questionnaireTitleKey:null,
            expandRowKeys:[],
        }
    },
    mounted(){
        
    },
    updated(){
        this.cancelLoading()
        // this.$refs.refTopicPage.getTopicPageData({isAddATopic:this.isAddATopic,cuerrfsjid:this.cuerrfsjid})
    },
    methods:{
        cancelLoading(){
            let timer = setInterval((val)=>{
                this.spinning = false
                clearInterval(timer);
            },500)
            
        },
        getData(val){
            this.formState = val
            this.expandRowKeys = []
            this.questionnaireTitleConfig.paramet.fwjjbxxid = val.id
            this.questionnaireTitleKey = Date.now()
        },
        toggleExpandChangeEvent(row,isLaunch){
            if(isLaunch){
                this.expandRowKeys.push(row.id)
            }else{
                if(this.expandRowKeys.indexOf(row.id)>=0){
                    this.expandRowKeys.splice(this.expandRowKeys.indexOf(row.id), 1)
                }
            }
        },
        returnClick(){
            this.visibleShow = false
        },
        refreshClick(){
            this.questionnaireTitleKey = Date.now()
        },
        //新增大标题
        AddQuestion(){
            this.fdbtVisible = true
            this.fdbtObj.id = ''
            this.fdbtObj.fdbt = ''
            this.fdbtKey = Date.now()
        },
        //编辑大标题
        editQuestion(row){
            //console.log(row)
            this.fdbtVisible = true
            this.fdbtObj.id = row.id
            this.fdbtObj.fdbt = row.fwjtmdbt
            this.fdbtKey = Date.now()
        },
        //选中表格
        checkboxChange(val){
            this.selectedRowKeysArr = []
            val.forEach(item => {
                this.selectedRowKeysArr.push(item.id)
            });
        },
        //删除大标题
        deleteQuestion(row){
            var that = this
            this.$confirm({
                title:'您确认要删除吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    spcyWjWjjbxxDeleteWjDbt({ids:row.id}).then(res=>{
                        if(res.code == 200){
                            that.$message.success('删除成功')
                            that.questionnaireTitleKey = Date.now()
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                },
                
            });
        },
        //删除题目
        deleteTitle(row){
            var that = this
            this.$confirm({
                title:'您确认要删除吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    spcyWjWjjbxxDeleteBatchWjtm({ids:row.id}).then(res=>{
                        if(res.code == 200){
                            that.$message.success('删除成功')
                            that.questionnaireTitleKey = Date.now()
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                },
                
            });
        },
        //新增题目
        increaseTitle(row){
            this.$refs.increaseTitleRef.getData({
                fwjtm:'',
                fwjtmlx:'单选',
                fsfczxx:'是',
                fsftxczkn:'否',
                fsftxxdyj:'否',
                fsftxyjjy:'否',
                fsftxyxdz:'否',
                fwjjbxxid:this.formState.id,
                fwjtmdbt:row.fwjtmdbt,
            })
            this.$refs.increaseTitleRef.visible = true
        },
        //编辑题目
        editTitle(row){
            this.$refs.increaseTitleRef.getData({...row,fwjjbxxid:this.formState.id})
            this.$refs.increaseTitleRef.visible = true
        },
        //编辑答案
        editAnswer(row){
            this.$refs.refAnswerModel.getAnswerData(row)
            this.$refs.refAnswerModel.visibleShow = true
        },
        //添加和修改大标题
        fdbtHandleOk(){
            //console.log(8888888)
            this.form.validateFields(['fdbt'], { force: true },(err, values) => {
                //console.log(err)
                if(!err){
                    //console.log(188888888888)
                    //添加
                    if(this.fdbtObj.id){
                        let data = {
                            fwjjbxxid:this.formState.id,
                            fdbt:values.fdbt,
                            id:this.fdbtObj.id
                        }
                        //console.log(288888888888)
                        spcyWjWjjbxxEditWjDbt(data).then(res=>{
                            if(res.code == 200){
                                this.$message.success(res.message)
                                this.fdbtVisible = false
                                this.questionnaireTitleKey = Date.now()
                            }else{
                                this.$message.warning(res.message)
                            }
                        })
                    }else{
                        let data = {
                            fwjjbxxid:this.formState.id,
                            fdbt:values.fdbt,
                        }
                        //console.log(388888888888)
                        spcyWjWjjbxxAddWjDbt(data).then(res=>{
                            if(res.code == 200){
                                this.$message.success(res.message)
                                this.fdbtVisible = false
                                this.questionnaireTitleKey = Date.now()
                            }else{
                                this.$message.warning(res.message)
                            }
                        })
                    }
                }
            })
        },
        //保存主表
        saveMainTable() {
            this.form.validateFields(['fwjbt', 'fwjlx'], { force: true },(err, values) => {
                if(!err){
                    if(this.formState.id){
                        editWjjbxx({...values,id:this.formState.id}).then(res=>{
                            if(res.code == 200){
                                this.questionnaireTitleKey = Date.now()
                                this.$message.success(res.message)
                            }else{
                                this.$message.warning(res.message)
                            }
                        })
                    }else{
                        spcyWjWjjbxxAddWjjbxx({...values,}).then(res=>{
                            if(res.code == 200){
                                this.formState.id = res.result.id
                                this.questionnaireTitleKey = Date.now()
                                this.$message.success(res.message)
                            }else{
                                this.$message.warning(res.message)
                            }
                        })
                    }
                    
                }
            })
        },
    }

}

</script>
<style lang="less">
/* .ant-form-item-label{
    font-weight: 600;
} */

 .ant-modal-title{
    font-weight: 600;
 }
 .ant-modal-header{
    background: #5ca3e5;
 }
 .ant-upload-list{
    display: none !important;
 }
 .ant-modal-footer .ant-btn-primary{
    border: 1px solid #5ca3e5 !important;
    background-color: #5ca3e5 !important;
    color: #fff !important;
 }
//  .test-paper-modal .ant-modal-header{
//     display: none !important;
//  }
 .test-paper-modal .ant-modal-footer{
    display: none !important;
 }
 .test-paper-modal .ant-modal-content{
    height: 100vh;
    overflow: auto;
 }
 .test-paper-full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: calc(100vh) !important;
    background: #fff;
  }
  .ant-modal-body {
    flex: 1;
    background: #fff;
  }
}
</style>